<template>
    <teleport v-if="modelValue" to="body">
        <div class="dialog-pdf" @click.prevent="handleClose">
            <div class="dialog-pdf-close" @click="handleClose">
                <CloseOutlined />
            </div>
            <iframe
                :src="iframeSrc"
                frameborder="0"
                class="dialog-pdf-iframe"
            ></iframe>
        </div>
    </teleport>
</template>
<script setup lang="ts">
import { CloseOutlined } from '@ant-design/icons-vue'
import { computed } from 'vue'

// const modelValue = defineModel()
const emits = defineEmits(['update:modelValue'])

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    src: {
        type: String,
        default: '',
    },
    toolbar: {
        type: String,
        defalut: '0',
    },
})
const iframeSrc = computed(() => {
    return `${props.src}#toolbar=${props.toolbar || '0'}`
    // return `${props.src}`
})
const handleClose = () => {
    emits('update:modelValue', false)
    // modelValue.value = false
}
</script>
<style lang="scss" scoped>
.dialog-pdf {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(20, 20, 20, 0.3);
    .dialog-pdf-close {
        $size: 40px;
        position: absolute;
        right: 2vw;
        top: 2vh;
        width: $size;
        height: $size;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: #{calc($size / 1.5)};
        cursor: pointer;
        border-radius: $size;
        border: 1px solid rgba(20, 20, 20, 0.5);
        transition: box-shadow 0.2s ease;
        &:hover {
            border-color: aliceblue;
            box-shadow: 0 0 10px rgba(200, 200, 200, 0.7);
        }
    }
    .dialog-pdf-iframe {
        width: 40vw;
        height: 98vh;
        // height: auto;
        // max-height: 98vh;
    }
}
</style>
